<template>
	<div class="cs-container">
		<div class="cs-title clear">
			<div class="left">vue-cli</div>
			<div class="right">
				<a href="https://cli.vuejs.org/zh/" target="_blank">官方文档</a>
			</div>
		</div>
		<div class="cs-content cs-table">
      <p>Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统</p>
			<p>Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
					它为现代前端工作流提供了开箱即用的构建设置。
					只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，
					以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。</p>
			<p>
					Vue CLI 致力于将 Vue 生态中的工具基础标准化。
					它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，
					而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
			</p>
			<img src="./../../../assets/images/vue-cli.png" style="width:auto" preview="1" preview-text="/vue-cli.png">
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ui',	
		data() {
			return {
                
			}
		},
		mounted() {
			// {render: f(){}, staticRenderFns: f(){}, others}
			// vue-loader 解析 .vue文件
			// template 内容将被提取并传递给 vue-template-compiler 为字符,预处理为 render函数，最终注入到script导出组件中
			// script 默认导出是一个vue.js的组件选项对象
			// style 默认匹配：/\.css$/ 通过Sass/SCSS 编译style
			// 异步执行函数 - 都是以回调函数为基础
			const async_ = () =>  {
				new Promise((resolve, rejuect) => {resolve()}).then(() => {
					console.log('%c1、Promise', 'color: green');
				});
				setImmediate(() => {
					console.log('%c2、setImmediate 宏任务', 'color: green');
				})
				setTimeout(() => {
					console.log('%c3、setTimeout', 'color: green');
				})
				process.nextTick(() => {
					console.log('%c4、process.nextTick', 'color: green');
				});
			}
			async_();
		},
		methods: {
			
		}
	}
</script>

<style>

</style>